<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar
      title="团体课"
      left-text=""
      left-arrow
      :border="false"
      @click-left="onClickLeft"
    />

    <!-- 城市定位 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
    </van-dropdown-menu>

    <!-- 我的课程 -->
    <div class="imgs">
      <img src="../../assets/img/letsfit.png.webp" alt="" class="img1" />
      <img
        src="../../assets/img/mycourse.png"
        alt=""
        @click="goMycourse"
        class="img2"
      />
    </div>

    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="2000"
      :show-indicators="false"
      :loop="true"
      :touchable="true"
    >
      <van-swipe-item>
        <img src="../../assets/img/14-49-06.png" alt="" class="l-imgs" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/img/14-49-12.png" alt="" class="l-imgs" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/img/14-49-18.png" alt="" class="l-imgs" />
      </van-swipe-item>
    </van-swipe>

    <!-- 课程图 -->
    <div class="c-line">
      <img src="../../assets/img/course1.jpg" alt="" class="c-imgs" />
      <img src="../../assets/img/course2.jpg" alt="" class="c-imgs" />
      <img src="../../assets/img/course3.jpg" alt="" class="c-imgs" />
    </div>

    <!-- 日历 -->
    <van-tabs v-model="activeName" color="#ff6600">
      <!-- 1 -->
      <van-tab title="标签 1" name="a">
        <template #title>
          <div>
            <div class="line1">今天</div>
            <div class="line2">2.28</div>
          </div>
        </template>
        <!-- 内容1 -->
        <div class="title">
          <img src="../../assets/img/icon-store.png" alt="" />
          <span>深圳市</span>
          <van-icon name="play" />
          <span class="a1">|</span>
          <span class="text">筛选</span>
        </div>
        <!-- box -->
        <div class="shop">
          <p>宝安同学都荟店</p>
          <van-icon name="like-o" />
        </div>
        <!-- 课程 -->
        <div class="courses">
          <!-- 课1 -->
          <div class="course">
            <img src="../../assets/img/teacher/zjj.webp" alt="" />
            <div class="details">
              <p>爵士</p>
              <div>
                <span class="t-name">周晶晶</span>
                <span class="l-line">|</span>
                <span class="c-time">18:20-19:20</span>
              </div>
              <div class="tags">
                <div class="tag">中强度</div>
                <div class="tag">舒缓减压</div>
                <div class="tag">舞蹈</div>
              </div>
            </div>
            <div class="button">预约</div>
          </div>
          <div class="underline"></div>
          <!-- 课2 -->
          <div class="course">
            <img src="../../assets/img/teacher/mn.webp" alt="" />
            <div class="details">
              <p>阴瑜伽</p>
              <div>
                <span class="t-name">美妮</span>
                <span class="l-line">|</span>
                <span class="c-time">10:00-11:00</span>
              </div>
              <div class="tags">
                <div class="tag">低强度</div>
                <div class="tag">舒缓减压</div>
                <div class="tag">体态改善</div>
              </div>
            </div>
            <div class="button">预约</div>
          </div>
          <div class="underline"></div>
          <!-- 课3 -->
          <div class="course">
            <img src="../../assets/img/teacher/mandy.webp" alt="" />
            <div class="details">
              <p>肩颈瑜伽</p>
              <div>
                <span class="t-name">mandy雅雯</span>
                <span class="l-line">|</span>
                <span class="c-time">12:15-13:15</span>
              </div>
              <div class="tags">
                <div class="tag">低强度</div>
                <div class="tag">舒缓减压</div>
                <div class="tag">体态改善</div>
              </div>
            </div>
            <div class="button">预约</div>
          </div>
          <div class="underline"></div>
        </div>
      </van-tab>
      <!-- 2 -->
      <van-tab title="标签 2">
        <template #title>
          <div>
            <div class="line1">二</div>
            <div class="line2">3.1</div>
          </div>
        </template>
        内容2
      </van-tab>
      <!-- 3 -->
      <van-tab title="标签 3">
        <template #title>
          <div>
            <div class="line1">三</div>
            <div class="line2">3.2</div>
          </div>
        </template>
        内容3
      </van-tab>
      <!-- 4 -->
      <van-tab title="标签 4">
        <template #title>
          <div>
            <div class="line1">四</div>
            <div class="line2">3.2</div>
          </div>
        </template>
        内容4
      </van-tab>
      <!-- 5 -->
      <van-tab title="标签 5">
        <template #title>
          <div>
            <div class="line1">五</div>
            <div class="line2">3.3</div>
          </div>
        </template>
        内容5
      </van-tab>
      <!-- 6 -->
      <van-tab title="标签 6">
        <template #title>
          <div>
            <div class="line1">六</div>
            <div class="line2">3.4</div>
          </div>
        </template>
        内容6
      </van-tab>
      <!-- 7 -->
      <van-tab title="标签 7">
        <template #title>
          <div class="line">
            <div class="line1">日</div>
            <div class="line2">3.4</div>
          </div>
        </template>
        内容7
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  data() {
    return {
      // 下拉城市
      value1: 0,
      option1: [
        { text: "深圳市", value: 0 },
        { text: "北京市", value: 1 },
        { text: "上海市", value: 2 },
      ],
      // 高亮
      activeName: "a",
    };
  },

  methods: {
    onClickLeft() {
      this.$router.push("/sport");
    },
    goMycourse() {
      this.$router.push("/mycourse");
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-icon-arrow-left::before {
  color: rgb(127, 127, 127);
  font-size: 20px;
}
/deep/.van-nav-bar__title {
  font-size: 14px;
}
/deep/.van-tab__text--ellipsis {
  font-size: 16px;
  color: rgb(178, 178, 178);
}
/deep/.van-tabs__wrap {
  border-bottom: 3px solid rgb(252, 252, 252);
}
/deep/.van-tabs {
  margin-top: 20px;
  // padding-top: 20px;
}

/deep/.van-tab--active {
  .van-tab__text {
    div {
      color: #000;
    }
  }
}

.imgs {
  width: 100%;
  background-color: #fff;
  padding: 15px 0 15px 0;
  display: flex;
  justify-content: space-between;
  .img1 {
    width: 160px;
    height: 17px;
    margin-left: 15px;
    margin-top: 8px;
  }
  .img2 {
    width: 75px;
  }
}

.my-swipe .van-swipe-item {
  text-align: center;
  background-color: #fff;
}

.c-line {
  background-color: #fff;
  width: 96%;
  margin: auto;
  display: flex;
  justify-content: space-between;
  padding: 2% 2% 4% 2%;
  margin-bottom: 4%;
}

.l-imgs {
  width: 90%;
  text-align: center;
  border-radius: 5px;
}

.c-imgs {
  width: 32%;
  border-radius: 5px;
}

.line {
  text-align: center;
}

.line1 {
  color: rgb(174, 174, 174);
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
}
.line2 {
  color: rgb(174, 174, 174);
  font-size: 12px;
  text-align: center;
  margin-bottom: 25px;
}

.title {
  width: 100%;
  position: relative;
  margin-left: 40px;
  margin-top: 10px;
  margin-bottom: 10px;
  img {
    width: 26px;
    position: absolute;
    top: 2px;
    left: -28px;
  }
  span {
    color: #333;
    font-size: 18px;
    margin-right: 3px;
  }
  .van-icon-play::before {
    font-size: 14px;
    color: #666;
    margin-right: 190px;
  }
  .a1 {
    color: #e7e7e7;
    margin-right: 15px;
  }
  .text {
    color: #666;
  }
}

.shop {
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  p {
    font-size: 16px;
    color: #666;
    margin-left: 15px;
  }
  .van-icon-like-o::before {
    font-size: 20px;
    margin-top: 15px;
    margin-right: 15px;
  }
}

.courses {
  width: 92%;
  margin: auto;
  .course {
    width: 100%;
    height: 100px;
    // line-height: 100px;
    display: flex;
    img {
      margin-top: 20px;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .details {
      width: 300px;
      p {
        font-size: 16px;
        color: #333333;
        margin: 0;
        margin-top: 10px;
        // font-weight: 600;
      }
      div {
        margin: 0;
        margin-bottom: 10px;
        .t-name {
          font-size: 14px;
          color: #999999;
        }
        .l-line {
          font-size: 18px;
          color: #dddddd;
          margin: 0 5px;
        }
        .c-time {
          color: #ff6040;
          font-size: 12px;
          font-weight: 600;
        }
      }
      .tags {
        display: flex;
        .tag {
          color: #a1a1a1;
          font-size: 12px;
          border-radius: 4px;
          background-color: #f5f5f5;
          padding: 2px 6px;
          margin-right: 10px;
        }
      }
    }
    .button {
      width: 54px;
      height: 30px;
      line-height: 30px;
      background-color: #ff6040;
      color: white;
      font-size: 12px;
      text-align: center;
      border-radius: 15px;
      margin-top: 50px;
      z-index: 10;
    }
  }
  .underline {
    width: 280px;
    border-bottom: 1px solid #f2f2f2;
    margin-left: 70px;
  }
}
</style>